<template>
  <div class="video-live-container">
    <div class="palyer-container">
      <!-- 弹幕 -->
      <div class="stage" v-show="isShowDm">
        <div class="dm" :class="item.className" v-for="item in sayList" :key="item.index">
          <div>{{item.txt}}</div>
        </div>
      </div>
      <!-- 礼物 -->
      <div class="gift-dm" :class="item.className" v-for="item in getGiftList" :key="item.index">
        <img src="../../assets/img/dmhj.png">
      </div>
     
      
      <div id="neplayer"></div>
      <div class="video-footer">
        <img
          src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1254880731,1878871150&fm=58&bpow=742&bpoh=492"
          class="live-logo"
        />
        <div class="desc-title">
          <span>卢本伟</span>
          <span>热度值1233</span>
        </div>
        <span class="follow">关注</span>
      </div>
    </div>
    <div class="chatroom-container">
      <!-- tabs -->
      <div class="header-top">
        <span :class="{isActive:activeName == 1}" @click="handleTab(1,'dayList')">日榜</span>
        <span :class="{isActive:activeName == 2}" @click="handleTab(2,'weekList')">周榜</span>
        <span :class="{isActive:activeName == 3}" @click="handleTab(3,'Audience')">观众</span>
        <span :class="{isActive:activeName == 4}" @click="handleTab(4,'Crouse')">课单</span>
      </div>
      <!-- tab content -->
      <div class="body">
        <component :is="componentName"></component>
      </div>
      <!-- 发言 -->
      <!-- 发言列表 -->
      <div class="say">
        <div id="scrolldIV" class="say-list">
          <span class="say-item" v-for="item in SayArr" :key="item.index">
            <span class="name">
              <b class="name">{{item.name}}:</b>
              {{item.txt}}
            </span>
          </span>
        </div>
        <!-- 文本输入 -->
        <div class="say-text">
          <textarea class="textarea" v-model="say" placeholder="和大家聊天吧"></textarea>
          <div class="btn-box">
            <!-- 弹幕 -->
            <i class="iconfont iconjinyong" @click="handleCloseDm"></i> 
            <!-- 礼物 -->
            <el-popover  placement="top" width="340" :offset="100" trigger="click" v-model="visible">
              <div class="gift-box">
                  <img v-for="item in giftList" :key="item.index" :src="item.url" style="margin-right:4px;cursor:pointer;" @click="handleSendGift(item.type)">
              </div>
              <i slot="reference" class="iconfont icongift__easyico"></i>
            </el-popover>
            <button @click="handelSen">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { setTimeout } from "timers";
import dayList from "./comps/dayList";
import weekList from "./comps/weekList";
import Audience from "./comps/Audience";
import Crouse from "./comps/Crouse";
export default {
  components: {
    dayList,
    weekList,
    Audience,
    Crouse
  },
  data() {
    return {
      url: this.$route.query.liveurl,
      activeName: 1,
      componentName: "dayList",
      say: "",
      danmu: "111",
      sayList: [],
      SayArr: [],
      isShowDm:true,
      visible:false,
      name: JSON.parse(window.localStorage.getItem("user")).username,
      giftList:[
        {
          url:require('../../assets/img/huojian.webp'),
          type:1,
        },
        {
          url:require('../../assets/img/feiji.webp'),
          type:2,
        },
        {
          url:require('../../assets/img/fudai.webp'),
          type:3,
        },
        {
          url:require('../../assets/img/yuwan.webp'),
          type:4,
        },
        {
          url:require('../../assets/img/ruoji.webp'),
          type:5,
        },
         {
          url:require('../../assets/img/zan.webp'),
          type:6,
        },
      ],
      getGiftList:[]
    };
  },
  mounted() {
    var container = document.getElementById("neplayer");
    container.innerHTML = `<video id="my-video" class="video-js  vjs-big-play-centered"></video>`;
    this.handlePlay();
  },
  methods: {
    handlePlay() {
      let options = {
        controls: true,
        autoplay: true,
        height: 590,
        width: 1100,
        controlBar: {
          playToggle: true,
          volumeMenuButton: true,
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          progressControl: true
        }
      };
      var myPlayer = window.neplayer("my-video", options);
      myPlayer.setDataSource({
        src: this.url,
        type: "application/x-mpegURL"
      });
      myPlayer.play();
    },
    handleTab(v, name) {
      this.activeName = v;
      this.componentName = name;
    },
    handelSen() {
      let num = Math.ceil(Math.random() * 10);
      this.sayList.push({ txt: this.say, className: `d` + num });
      this.SayArr.push({ txt: this.say, name: this.name });
      var div = document.getElementById("scrolldIV");
      div.scrollTop = div.scrollHeight + 20;
      if (this.sayList.length > 10) {
        this.sayList.shift();
      }
      this.say = "";
    },
    handleCloseDm(){
      this.isShowDm = !this.isShowDm
    },
    handleSendGift(){
      this.visible = false
      let num = Math.ceil(Math.random() * 10);
      this.getGiftList.push({ txt: this.say, className: `giftd` + num });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./style/liveroom.scss";
</style>
